<template>
    <div class="container">
        <el-tabs v-model="activeTab" class="mt-4">
            <el-tab-pane label="综合" name="all"></el-tab-pane>
            <el-tab-pane label="视频" name="video"></el-tab-pane>
            <el-tab-pane label="番剧" name="series"></el-tab-pane>
            <el-tab-pane label="影视" name="movies"></el-tab-pane>
            <el-tab-pane label="直播" name="live"></el-tab-pane>
            <el-tab-pane label="专栏" name="column"></el-tab-pane>
            <el-tab-pane label="用户" name="user"></el-tab-pane>
        </el-tabs>

        <el-radio-group v-model="sortBy" class="mt-4">
            <el-radio-button label="综合排序">综合排序</el-radio-button>
            <el-radio-button label="最多播放">最多播放</el-radio-button>
            <el-radio-button label="最新发布">最新发布</el-radio-button>
            <el-radio-button label="最多弹幕">最多弹幕</el-radio-button>
            <el-radio-button label="最多收藏">最多收藏</el-radio-button>
        </el-radio-group>

        <div class="video-grid mt-4">
            <div v-for="video in videos" :key="video.id" class="video-item" @click="handleClick(video)">
                <el-image :src="video.img" fit="cover"></el-image>
                <div class="video-info">
                    <h3>{{ video.video_name }}</h3>
                    <p>{{ video.views }} views · {{ video.likes }} likes</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

export default {
    setup() {
        const route = useRoute();
        const router = useRouter();
        const searchQuery = ref('');
        const activeTab = ref('all');
        const sortBy = ref('综合排序');
        const videos = ref([]);

        const fetchVideos = async () => {
            try {
                const response = await axios.get('/searchByName', {
                    params: { video_name: searchQuery.value }
                });
                videos.value = response.data;
            } catch (error) {
                console.error('Error fetching videos:', error);
            }
        };

        watch(() => route.query.q, (newQuery) => {
            if (newQuery) {
                searchQuery.value = newQuery;
                fetchVideos();
            }
        }, { immediate: true });

        const handleClick = (item) => {
            router.push(`/videoshow/${item.video_id}`);
        };

        return { searchQuery, activeTab, sortBy, videos, handleClick };
    }
};
</script>

<style scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.mt-4 {
    margin-top: 1rem;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.video-item {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-item:hover {
    transform: scale(1.05);
}

.video-info {
    padding: 10px;
}

.video-info h3 {
    margin: 0;
    font-size: 14px;
}

.video-info p {
    margin: 5px 0 0;
    font-size: 12px;
    color: #999;
}
</style>